<template>
	<view>
		<view class="whole" v-if="warningList.length==0">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		<view v-if="warningList.length!=0">
			<view class="card" v-for="(item,index) in warningList" :key="index" @click="details(item,index)">
				<!-- <view v-if="item.houseNo0==groupHouseNo"> -->
					<view class="top">
						<image v-if="item.status=='0'" src="/static/image/warning.png" mode="aspectFit"></image>
						<image v-if="item.status=='1'" src="/static/image/greenAlarm.png" mode="aspectFit"></image>
						<text class="name">{{item.memberName}}</text>
						<text v-if="item.memberName==''||item.memberName==null" class="name">{{item.buildingName}}</text>
						<!-- <text v-if="item.memberName==''||item.memberName==null" class="name">{{item.houseNo}}</text> -->
						<text class="tiem">{{item.alarmTime}}</text>
					</view>
					<hr />
					<view class="center">
						<table cellSpacing="0" cellpadding="1" width="100%" class="ctl">
							<tBody>
								<tr>
									<td class="td_1">报警类型:</td>
									<td class="td">{{item.devName}}</td>
								</tr>
								<tr>
									<td class="td_1">报警信息:</td>
									<td class="td" style="color: #ff0000;">{{item.alarmDetail}}</td>
								</tr>
							</tBody>
						</table>
					</view>
					<hr />
					<view class="bottom">
						<table cellSpacing="0" cellpadding="1" width="100%" class="ctl">
								<tBody>
									<tr>
										<td class="td_1">处理状态:</td>
										<td class="td" v-if="item.status=='0'">未处理</td>
										<td class="td" v-if="item.status=='1'" style="color: #1AFA29;">已解除</td>
									</tr>
								</tBody>
							</table>
						</view>
				<!-- </view> -->
				
				
			</view>
			<text class="loading-text">
				{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warningList: [],
				warningLists:[],
				unreadPages: 1,
				loadingType: '0',
				groupStaffquantity:'',//分组数量
				groupHouseNo:null,//分组房间号
				groupName:[],//分组房间名称
				group:[],
				groupStaffs:[],
				houseNo:'',//房间号
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				scrollTop: '',
			}
		},
		onLoad() {
			this.id=uni.getStorageSync("id")
			//获取登录人分组信息
			this.groupStaff()
			
		},
		// scrollTop是data中定义的变量，可以将页面的滚动值赋值保存下来。
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// console.log(this.scrollTop)
		},
		onReachBottom() {
			this.getWarningList()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			if(this.groupStaffs.length!=0){
			this.warning();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onBackPress(e) {
			if (e.from == "backbutton") {
				uni.setStorage({
					key: "newsTop",
					data: 0
				})
				uni.navigateBack();
				return true;
			}
		},
		onShow() {
			
			this.onSocketMessage()
			
			// this.warning();
			uni.getStorage({
				key: "newsTop",
				success: (res) => {
					// console.log(res.data);
					var timer = setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: res.data, //距离页面顶部的距离
							duration: 0
						});
						clearTimeout(timer);
					}, 100)
				}
			})
			uni.$on("planAdd", res => {
				console.log(res);
				for (let i = 0; i < this.warningList.length; i++) {
					if (this.warningList[i].id == res.id) {
						this.warningList[i].status = res.status
					}
				}
				// 清除监听
				uni.$off('planAdd');
			})
		},
		methods: {
			async groupStaff(){
				const res = await this.$myRequest({
					url: '/api-operate/group/staffId/'+this.id,
					method: "get",
				})
				if (res.success == true) {
					this.groupStaffs=res.body.groupStaff
					console.log(this.groupStaffs)
					if(this.groupStaffs.length!=0){
						var groupHouseNos=null
							for (let i = 0; i < this.groupStaffs.length; i++) {
								
								if(groupHouseNos==null){
									groupHouseNos = this.groupStaffs[i].houseNo;
								}else{
									groupHouseNos =groupHouseNos+','+ this.groupStaffs[i].houseNo;
								}
							}
							this.groupHouseNo=groupHouseNos
							console.log(this.groupHouseNo);
						this.warning()
					}
				}
			},
			//获取警告列表
			async warning() {
				const res = await this.$myRequest({
					url: '/api-alarm/alarms/',
					method: "get",
					data: {
						// pageSize:"10"
					      houseNo:this.groupHouseNo,
					}
				})
				if (res.success == true) {
					this.warningList = res.data.data;
					
					this.unreadPages=1
					
					// console.log(JSON.stringify(this.warningList))
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					}, 50);
				}
			},
			details(warningList, index) {
				uni.navigateTo({
					url: '/pages/callThePolice/alarmDetails?memberName=' + warningList.memberName +
						"&devName=" + warningList.devName + "&alarmTime=" + warningList.alarmTime +
						"&alarmDetail=" + warningList.alarmDetail + "&id=" + warningList.id +
						"&status=" + warningList.status + "&buildingName=" + warningList.buildingName
				})
				uni.setStorage({
					key: "newsTop",
					data: this.scrollTop
				})
			},
			/* 上拉加载未读列表 */
			async getWarningList() {
				this.unreadPages++
				console.log(this.unreadPages)
				if (this.loadingType != 0) {
					return false; //loadingType!=0;直接返回
				}
				this.loadingType = 1;
				// uni.showNavigationBarLoading();
				const res = await this.$myRequest({
					url: '/api-alarm/alarms/',
					method: "get",
					data: {
						pageNumber: this.unreadPages,
						houseNo:this.groupHouseNo,
					},
				})
				if (res.success == true) {
					if (this.warningList != null) {
						if (this.warningList.length == res.data.totalSize) { //当之前的数据长度等于count时跳出函数，不继续执行下面语句
							this.loadingType = 2;
							// uni.hideNavigationBarLoading(); //关闭加载动画
							return false;
						}
						this.warningList = this.warningList.concat(res.data.data)
					}
					this.loadingType = 0; //将loadingType归0重置
					// uni.hideNavigationBarLoading(); //关闭加载动画
				}
			},
			//	打开成功监听服务器返回的告警信息
			onSocketMessage() {
				uni.onSocketMessage(res => {
					// console.log(JSON.parse(res.data));
					const data = JSON.parse(res.data)
					if (data.code == "99") {
						if (data.hasOwnProperty("msg")) {
							if (data.msg != 'ping') {
								getApp().globalData.getSocketMsg(res.data);
								if (data.msgType == "pension.com.alarm.entity.Alarm" ) {
									console.log(data);
									this.warning();
								}
							}
						}
					}
				});
			}
		},
	}
</script>

<style lang="less">
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;

		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}

	.loading-text {
		margin-bottom: 40rpx;
		height: 50rpx;
		line-height: 80rpx;
		font-size: 30rpx;

		// margin: 100rpx;
		color: #959595;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.card {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 10px;
		background-color: #FFFFFF;

		hr {
			width: 100%;
			height: 1px;
			border: 0;
			margin-bottom: 10rpx;
			background-color: #c3c7cc;
		}

		.top {
			margin: 0 20rpx;
			display: flex;
			height: 80rpx;
			text-align: center;

			image {
				width: 60rpx;
				height: 80rpx;
			}

			.name {
				margin-left: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 35rpx;
			}

			.tiem {
				font-size: 28rpx;
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				right: 40rpx;
			}
		}

		.center {
			margin: 0 20rpx;
			padding: 5rpx 0;

			// background-color: #00ff7f;
			.ctl {
				table-layout: fixed;

				.td_1 {
					color: #959595;
					vertical-align: top;
					width: 25%;
					word-break: break-all;
				}

				.td {
					word-break: break-all;
					color: #000000;
				}
			}
		}

		.bottom {
			margin: 0 20rpx;
			padding: 5rpx 0;

			// background-color: #007AFF;
			.ctl {
				table-layout: fixed;

				.td_1 {
					color: #959595;
					vertical-align: top;
					width: 25%;
					word-break: break-all;
				}

				.td {
					word-break: break-all;
					color: #ffaa00;
				}
			}
		}
	}
</style>
